<template>
  <div id="rentalSituation"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, watchEffect } from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const initChart = () => {
  var chartDom = document.getElementById("rentalSituation");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      right: "5%",

      textStyle: {
        color: "rgba(255, 255, 255)",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: props.data.map((item) => item.name),
        axisLabel: {
          //interval设置成 0 强制显示所有标签
          interval: 0,
          formatter: function (params) {
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = 4; //一行显示几个字
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p == rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }
            } else {
              newParamsName = params;
            }
            return newParamsName;
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.6)", // 坐标轴线线的颜色

            // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          //网格线
          show: false,
        },
        axisLabel: {
          formatter: (value) => {
            return value * 100 + "%";
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.6)", // 坐标轴线线的颜色
            // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
      },
    ],
    tooltip: {
      //提示框组件
      trigger: "item", //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: (value) => {
   

        return ((value.data*100).toFixed(2) ) + "%";
      }, 
    },

    series: [
      {
        name: "已出租",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        // label: {
        //   color: "rgba(255, 255, 255, 0.6)",

        //   show: true,
        //   formatter: (params) => {
        //     const unRent = props.data.find(
        //       (item) => item.rent === params.data
        //     ).unRent;
        //     return (params.data / unRent + params.data).toFixed(2) + "%";
        //   },
        // },
        barMaxWidth: 25,
        data: props.data.map((item) =>
          (item.rent / (item.rent + item.unRent)).toFixed(4)
        ),
        // data: props.data.map((item) => (0.2)),

        itemStyle: {
          // 使用方法一的写法
          color: "#4DFFF3",
        },
      },
      {
        name: "未出租",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },

        itemStyle: {
          // 使用方法一的写法
          color: "#24A59C",
        },

        data: props.data.map((item) =>
          (item.unRent / (item.rent + item.unRent)).toFixed(4)
        ),
      },
    ],
  };

  option && myChart.setOption(option);
};

onMounted(() => {});
watchEffect(() => {
  if (props.data.length > 0) {
    initChart();
  }
});
</script>

<style scoped>
#rentalSituation {
  width: 100%;
  height: 250px;
}
</style>
